<template>
  <div class="container">
    <div class="nav" v-for="(item, index) in routers" :key="index">
      <button @click="clickButton(item.name)">点击跳转1{{ item.name }}</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const route = useRouter()
const routers = [
  {
    name: 'Product',
  },
  {
    name: 'Shop',
  },
  {
    name: 'System',
  },
]
function clickButton(name: string) {
  route.push({ name })
}
</script>

<style scoped lang="less">
.container {
  color: #888;
  width: 500px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav {
  display: flex;
}

button {
  width: 180px;
  height: 40px;
  margin: 0 5px;
  background: #f212a2;
  border: none;
  color: white;
  cursor: pointer;
}
</style>
